import TreeBox from "./component/treeBox";
import PhoneNumberCell from "./component/PhoneNumberCell";
import { Col, Row, Space, Table, Tag, Form, Input, Button } from 'antd';
import React, { useEffect, useState } from 'react';
import { userListAPI } from '@/api/api.js';
import SearchBox from "./component/SearchBox";
const columns = [
  {
    title: '昵称',
    dataIndex: 'nickname',
    key: 'nickname',
    render: (text, record) => <a key={record.key}>{text}</a>,
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
    key: 'mobile',
    width: 150,
    render: (mobile, record) => (
      <PhoneNumberCell key={record.key} phone={mobile} onShowFullPhone={() => console.log('Show full phone number')} />
    )
  },
  {
    title: '性别',
    key: 'sex',
    dataIndex: 'sex',
    render: (sex, record) => (
      <Tag key={record.key} color={sex === '1' ? 'geekblue' : 'green'}>
        {sex === '1' ? '男' : '女'}
      </Tag>
    ),
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space key={record.key} size="middle">
        <a key="invite">邀请 {record.name}</a>
        <a key="delete">删除</a>
      </Space>
    ),
  },
];

const User = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const [selectedRowKeys, setSelectedRowKeys] = useState(['']);
  const [dataList, setDataList] = useState([]);
  const [searchNickname, setSearchNickname] = useState('');
  const [searchMobile, setSearchMobile] = useState('');

  const handleTreeSelect = (e) => {
    setSelectedRowKeys(e);
    getList();
  };

  const getList = (searchParams = {}) => {
    userListAPI({
      pageNo: currentPage,
      pageSize: pageSize,
      deptId: selectedRowKeys[0],
      ...searchParams
    }).then(res => {
      console.log(res);
      setDataList(res.data.list.map((item, index) => ({ ...item, key: index })));
      setTotal(res.data.total);
    });
  };

  const handleTableChange = (page, pageSize) => {
    setCurrentPage(page);
    setPageSize(pageSize);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const searchParams = {};
    if (searchNickname) {
      searchParams.nickname = searchNickname;
    }
    if (searchMobile) {
      searchParams.mobile = searchMobile;
    }
    getList(searchParams);
  };
  const handleReset = () => {
    setSearchNickname('');
    setSearchMobile('');
    getList(); // 重置后重新获取数据
  };
  useEffect(() => {
    getList();
  }, []);

  return (
    <div>
      <Row>
        <Col span={4}>
          <TreeBox onSelect={handleTreeSelect} />
        </Col>
        <Col span={19} push={1}>
          <SearchBox>
            <Form onSubmitCapture={handleSubmit} layout="inline">
              <Form.Item>
                <Input
                  placeholder="昵称"
                  value={searchNickname}
                  onChange={(e) => setSearchNickname(e.target.value)}
                />
              </Form.Item>
              <Form.Item>
                <Input
                  placeholder="手机号"
                  value={searchMobile}
                  onChange={(e) => setSearchMobile(e.target.value)}
                />
              </Form.Item>
              <Button type="primary" htmlType="submit" style={{ marginRight: 8 }}>
                搜索
              </Button>
              <Button onClick={handleReset}>重置</Button>
            </Form>
          </SearchBox>

          <Table
            rowSelection={{
              selectedRowKeys,
              onChange: (selectedKeys) => setSelectedRowKeys(selectedKeys),
            }}
            columns={columns}
            dataSource={dataList}
            pagination={{
              current: currentPage,
              pageSize: pageSize,
              onChange: handleTableChange,
              total: total
            }}
          />
        </Col>
      </Row>
    </div>
  );
};

export default User;